<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .box1 {
            width: 375px;
            height: 200px;
            background-color: red;
        }

        /* 
            视口：布局视口，视觉视口，理想视口，
            在移动设备初期，未解决PC端的网页在
            移动端正常实现的问题，乔布斯提出布局视口的概念。


            早期的PC端网页的版心一般都是980像素，
            而手机屏幕的碎片化比较严重，把PC端网页 
            放到布局视口中，布局视口默认宽度就是980px，
            然后把布局视口压缩进手机中，宽度不会发生变化


            px：CSS像素
            物理像素：设备的生产厂商在生产的时候就已经固定死了

            PC端网页， 1px = 1个物理像素进行表示

            现在我们会为移动端设备单独设计页面，所以我们就不需要
            980px的布局视口了，我们就像设备多宽，布局的视口就多宽
            这就是理想视口
        */
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

</html>